import React from 'react';
import './index.css';

const EXP = {
  plus: 0,
  minus: 1,
  multiply: 2,
  divide: 3,
};

const CTRL = {
  reset: 0,
  revert: 1,
  percent: 2,
};

const BTNS = [
  { label: 'C', type: 'CTRL', value: CTRL.reset },
  { label: '取反', type: 'CTRL', value: CTRL.revert },
  { label: '%', type: 'CTRL', value: CTRL.percent },
  { label: '÷', type: 'EXP', value: EXP.divide },
  { label: '7', type: 'NUMBER', value: '7' },
  { label: '=', type: 'CALC', value: null },
];

export default class Calc extends React.Component {
  state = {
    number1: '0',
    exp: null,
    number2: '0',
  };

  onNumberClick = value => {
    const { exp, number1, number2 } = this.state;
    let prevNumber = exp === null ? number1 : number2;
    if (/\./.test(prevNumber) && value === '.') {
      return;
    }
    let newNumber = prevNumber + value;
    if (!/^0\./.test(number1)) {
      newNumber = newNumber.replace(/^0/, '');
    }
    if (exp === null) {
      this.setState({ number1: newNumber });
    } else {
      this.setState({ number2: newNumber });
    }
  };

  onCtrlClick = ctrl => {
    const { exp, number1, number2 } = this.state;
    let prevNumber = exp === null ? number1 : number2;

    switch (ctrl) {
      case CTRL.reset:
        this.setState({ number1: 0, number2: 0, exp: null });
        break;
      case CTRL.revert:
        prevNumber = String(-Number(prevNumber));
        if (exp === null) {
          this.setState({ number1: prevNumber });
        } else {
          this.setState({ number2: prevNumber });
        }
        break;
      case CTRL.percent:
        prevNumber = String(Number(prevNumber) / 100);
        if (exp === null) {
          this.setState({ number1: prevNumber });
        } else {
          this.setState({ number2: prevNumber });
        }
        break;
      default:
        break;
    }
  };

  onExpClick = exp => {
    this.setState({ exp });
  };

  onCalc = () => {
    let { exp, number1, number2 } = this.state;

    switch (exp) {
      case EXP.plus:
        number1 = String(Number(number1) + Number(number2));
        break;
      case EXP.divide:
        number1 = String(Number(number1) / Number(number2));
        break;
      default:
        break;
    }

    this.setState({ number1, number2: 0, exp: null });
  };

  render() {
    const { number1, number2, exp } = this.state;
    console.log(this.state);
    const currentNumber = exp === null ? number1 : number2;

    return (
      <div className="calc">
        <div className="calc-screen">{currentNumber}</div>

        {BTNS.map(btn => {
          // onClick
          const onClick = {
            EXP: () => this.onExpClick(btn.value),
            CTRL: () => this.onCtrlClick(btn.value),
            NUMBER: () => this.onNumberClick(btn.value),
            CALC: () => this.onCalc(),
          }[btn.type];

          // className
          const cls = {
            EXP: 'exp',
            CTRL: 'ctrl',
            NUMBER: '',
            CALC: 'exp',
          }[btn.type];

          return (
            <button key={btn.label} className={cls} onClick={onClick}>
              {btn.label}
            </button>
          );
        })}
      </div>
    );
  }
}
